<form lay-filter="warehouseOutboundOrderSkuDetails" id="warehouseOutboundOrderSkuDetails" class="layui-form open-form">
  <div class="open-model">
    <div class="open-auto">
      <div>
        <div class="layui-form-item layui-row">
          <input name="id" type="hidden" />
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">物料编号</label>
            <div class="layui-input-block">
              <select id="productId" name="productId" lay-filter="productId"></select>
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">所属客户</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" disabled name="costomerName" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">厂家</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" disabled name="productProducer" />
            </div>
          </div>

          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">品种</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" disabled name="productVariety" />
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-row">
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">牌号</label>
            <div class="layui-input-block">
              <input class="layui-input adv-disable" disabled name="productMark" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
              <input class="layui-input adv-disable" disabled name="productBrand" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">计量单位</label>
            <div class="layui-input-block">
              <input class="layui-input adv-disable" disabled name="productMainUnit" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">提货数</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input adv-disable" disabled name="quantityPicked" />
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-row">
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">在库数</label>
            <div class="layui-input-block">
              <input class="layui-input adv-disable" disabled name="stockQuantity" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">选择库位</label>
            <div class="layui-input-block">
              <select id="warehouseId" name="warehouseId" lay-filter="warehouseId"></select>
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">小计毛重</label>
            <div class="layui-input-block">
              <input class="layui-input adv-disable" disabled name="totalGrossWeight" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">小计净重</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input adv-disable" disabled name="totalNetWeight" />
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-row">
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">本次出库数量</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input adv-disable" id="nowSum" disabled name="nowSum" />
            </div>
          </div>
          <div class="layui-inline layui-col-md3">
            <label class="layui-form-label">出库托管结算费</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" disabled name="qutboundFee" />
            </div>
          </div>
        </div>
      </div>

      <div class="layui-form-item tableContent">
        <!-- {{# if(d.eventName !== 'detail'){ }} -->
        <!-- {{# } }} -->
        <table class="layui-table" id="skuDetailTable" lay-filter="skuDetailTable"></table>
      </div>

      <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        <button class="layui-btn" lay-filter="checkSkuBtn" type="button" lay-submit>提交</button>
      </div>
    </div>
  </div>
</form>

<script type="text/html" id="skuDetailTableBar">
  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" type="button">删除</button>
</script>
<script>
  layui.use(["layer", "form", "table", "admin", "laydate", "upload", "laytpl"], async function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    let laydate = layui.laydate;
    let laytpl = layui.laytpl;
    const nowData = { ...parentData };
    form.val("warehouseOutboundOrderSkuDetails", {
      costomerName: nowData.customerName
    });
    console.log(nowData);

    const tableVal = table.render({
      elem: "#skuDetailTable",
      page: false,
      limit: 999999,
      //   height: 400,
      data: [],
      cols: [
        [
          { type: "checkbox" },
          { type: "numbers", title: "序号" },
          { field: "sysBundleCode", align: "center", title: "捆包号" },
          { field: "userBundleCode", align: "center", title: "货主捆包号" },
          { field: "productProducer", align: "center", title: "厂家/产地" },
          { field: "productVariety", align: "center", title: "品种" },
          { field: "productMark", align: "center", title: "牌号" },
          { field: "productBrand", align: "center", title: "品牌" },
          { field: "productType", align: "center", title: "产品类型" },
          { field: "customerId", align: "center", title: "货权客户ID" },
          { field: "indate", align: "center", title: "货权入库日期" },
          { field: "price", align: "center", title: "托管费" },
          { field: "firstEntryDate", align: "center", title: "首入库日期" },

          { field: "netWeight", align: "center", title: "净重" },
          { field: "grossWeight", align: "center", title: "毛重" }
          // {
          //   align: "center",
          //   toolbar: "#skuDetailTableBar",
          //   title: "操作",
          //   width: 100,
          //   hide: nowData.eventName === "detail"
          // }
        ]
      ],
      done: function () {
        let list = table.cache["skuDetailTable"];
        admin.tableInputChange("skuDetailTable");
      }
    });
    table.on("checkbox(skuDetailTable)", function (obj) {
      const checkedData = table.checkStatus("skuDetailTable").data; // 获取选中的数据
      form.val("warehouseOutboundOrderSkuDetails", {
        totalGrossWeight: checkedData.reduce((acc, curr) => Number(acc) + Number(curr.grossWeight), 0),
        totalNetWeight: checkedData.reduce((acc, curr) => Number(acc) + Number(curr.netWeight), 0),
        qutboundFee: checkedData.reduce((acc, curr) => Number(acc) + Number(curr.price), 0),
        nowSum: checkedData.length
      });
    });

    admin.initDataSelect(nowData.skuList, {}, "productId", null, "物料编号", "productCode", "productId");
    form.on("select(productId)", function (d) {
      form.val("warehouseOutboundOrderSkuDetails", {
        daima: "",
        productProducer: "",
        productVariety: "",
        productMark: "",
        productBrand: "",
        productType: "",
        customerId: "",
        productOwnerWarehouseDate: ""
      });

      if (d.value) {
        form.val(
          "warehouseOutboundOrderSkuDetails",
          nowData.skuList.find((v) => v.productId === d.value)
        );
        admin.req(
          "warehouse/warehouse/admin/warehouseFactoryShelfSpace/selectProductSpace",
          {
            id: d.value
          },
          function (res) {
            $("#warehouseId").empty();
            if (res.data && res.data.length > 0) {
              admin.initDataSelect(res.data, {}, "warehouseId", null, "库位", "code");
            } else {
              layer.msg("该物料没有库位", { icon: 2, time: 1000 });
            }
          }
        );
      }
    });
    form.on("select(warehouseId)", function (d) {
      if (d.value && $("#productId").val()) {
        admin.req(
          "warehouse/warehouse/productInventory/selectProduct",
          {
            spaceId: d.value,
            productId: $("#productId").val(),
            warehouseSignOrderId: $("#warehouseOutboundOrderId").val()
          },
          function (res) {
            table.reload("skuDetailTable", {
              data: res.data.map((v) => {
                delete v.length;
                //去除所有为空或者null或者false的属性
                // Object.keys(v).forEach((key) => {
                //   if (v[key] === null || v[key] === false || v[key] === "" ) {
                //     delete v[key];
                //   }
                // });
                return v;
              })
            });
            console.log(
              res.data.map((v) => {
                delete v.isDeleted;
                //去除所有为空或者null或者false的属性
                Object.keys(v).forEach((key) => {
                  if (v[key] === null || v[key] === false || v[key] === "" ) {
                    delete v[key];
                  }
                });
                return v;
              })
            );

            form.val("warehouseOutboundOrderSkuDetails", {
              stockQuantity: res.data.length
            });
          }
        );
      }
    });
    form.on("submit(checkSkuBtn)", function (d) {
      let formData = { ...d.field };
      let list = table.checkStatus("skuDetailTable").data;
      childData.skuList = list;
      layer.close(nowData.zindex);
      return false;
    });
    table.on("tool(skuDetailTable)", function (obj) {
      var d = obj.data; // 获取当前行的数据
      var layEvent = obj.event; // 获取事件名（edit 或 del）
      if (obj.tr) {
        obj.tr.on("click", function (e) {
          e.preventDefault(); // 防止默认行为
        });
      }
      if (layEvent == "del") {
        const index = $(obj.tr[0]).data("index");
        let list = table.cache["skuDetailTable"].filter((v) => {
          return v["LAY_TABLE_INDEX"] != index;
        });
        table.reload("skuDetailTable", {
          data: list
        });
      }
    });
  });
</script>

<style>
  #warehouseOutboundOrderSkuDetails .layui-form-label {
    width: 125px;
  }

  #warehouseOutboundOrderSkuDetails .layui-input-block {
    margin-left: 155px;
  }

  #warehouseOutboundOrderSkuDetails .layui-form-item .layui-inline {
    /* margin-bottom: 5px; */
    margin-right: 0px;
  }
</style>
